Welcome to Jekyll’s step-by-step tutorial. This tutorial takesyou from having some front-end web development experience to building yourfirst Jekyll site from scratch without relying on the default gem-based theme.

Jekyll is a Ruby gem. First, install Ruby on your machine. Go to Installation and follow theinstructions for your operating system.

With Ruby installed, install Jekyll from the terminal:

Create a new Gemfile to list your project’s dependencies:

Edit the Gemfile in a text editor and add jekyll as a dependency:

Run bundle to install jekyll for your project.

You can now prefix all jekyll commands listed in this tutorial with bundle execto make sure you use the jekyll version defined in your Gemfile.

It’s time to create a site! Create a new directory for your site and nameit whatever you want. Through the rest of this tutorial we’ll refer to thisdirectory as root.

You can also initialize a Git repository here.

One of the great things about Jekyll is there’s no database. All content andsite structure are files that a Git repository can version. Using a repositoryis optional but is recommended. You can learn moreabout using Git by reading theGit Handbook.

Let’s add your first file. Create index.html in root with the followingcontent:

Since Jekyll is a static site generator, it has to build the sitebefore we can view it. Run either of the following commands to build your site:

When you’re developing a site, use jekyll serve. To force the browser to refresh with every change, use jekyll serve --livereload.If there’s a conflict or you’d like Jekyll to serve your development site at a different URL, use the --host and --port arguments,as described in the serve command options.

The version of the site that jekyll serve builds in _site is not suited for deployment. Links and asset URLs in sites createdwith jekyll serve will use https://localhost:4000 or the value set with command-line configuration, instead of the values setin your site’s configuration file. To learn about how to build your site when it’sready for deployment, read the Deployment section of this tutorial.

Run jekyll serve and go tohttp://localhost:4000 inyour browser. You should see “Hello World!”.

At this point, you might be thinking, “So what?”. The only thing that happened was that Jekyll copied anHTML file from one place to another.

Patience, young grasshopper, there’sstill much to learn!

Next. you’ll learn about Liquid and templating.